<script >
export default {
  name: 'app',
  data() {
    return {
      participants: [
        {
          id: 'user1',
          name: 'Matteo',
          imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
        },
        {
          id: 'user2',
          name: 'Support',
          imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
        },
        {
          id: 'user3',
          name: '倪鹏德',
          imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
        },
        // {
        //   id: 'me',
        //   name: '慧慧',
        //   imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
        // }
      ], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
      titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
      messageList: [
        // {
        //   author: 'support',
        //   type: 'text',
        //   id: 1, // or text '1'
        //   isEdited: false,
        //   data: {
        //     text: 'some text',
        //     meta: '06-16-2019 12:43'
        //   }
        // },
        // {
        //   author: 'me',
        //   type: 'emoji',
        //   id: 1, // or text '1'
        //   isEdited: false,
        //   data: {
        //     code: 'someCode'
        //   }
        // },
        // {
        //   author: 'me',
        //   type: 'file',
        //   id: 1, // or text '1'
        //   isEdited: false,
        //   data: {
        //     file: {
        //       name: 'file.mp3',
        //       url: 'https:123.rf/file.mp3'
        //     }
        //   }
        // },
        { type: 'text', author: `me`, data: { text: `Say yes!`, meta: '06-16-2019 12:43' } },
        { type: 'text', author: `user1`,data: { text: `No.` } },
        { type: 'text', author: `user2`, data: { text: `No.` } },
        { type: 'text', author: `user3`, data: { text: `No.` } }
      ], // the list of the messages to show, can be paginated and adjusted dynamically
      newMessagesCount: 0,
      isChatOpen: false, // to determine whether the chat window should be open or closed
      showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
      colors: {
        header: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        launcher: {
          bg: '#4e8cff'
        },
        messageList: {
          bg: '#ffffff'
        },
        sentMessage: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        receivedMessage: {
          bg: '#eaeaea',
          text: '#222222'
        },
        userInput: {
          bg: '#f4f7f9',
          text: '#565867'
        },
        emojiPicker: {
          bg: 'white',
          text: '#b8c3ca'
        }
      }, // specifies the color scheme for the component
      alwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
      messageStyling: true, // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
      messageMargin: { system: '25px auto' }, // sets the margin for the system messages
      acceptedFileTypes: ['image/*', 'audio/*'] // sets the accepted file types for the file input, in this example it accepts only images and audio files (omit to accept any type of file)
    }
  },
  methods: {
    sendMessage (text) {
      if (text.length > 0) {
        this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
        this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })
      }
    },
    onMessageWasSent (message) {
      // called when the user sends a message
      this.messageList = [ ...this.messageList, message ]
    },
    openChat () {
      // called when the user clicks on the fab button to open the chat
      this.isChatOpen = true
      this.newMessagesCount = 0
    },
    closeChat () {
      // called when the user clicks on the botton to close the chat
      this.isChatOpen = false
    },
    handleScrollToTop () {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    },
    handleOnType () {
      console.log('Emit typing event')
    },
    editMessage(message){
      const m = this.messageList.find(m=>m.id === message.id);
      m.isEdited = true;
      m.data.text = message.data.text;
    }
  }
}

// :participants="participants"  聊天参与者列表，包含用户信息（如ID、名称、头像等）
// :titleImageUrl="titleImageUrl"  聊天窗口标题栏的图片URL
// :onMessageWasSent="onMessageWasSent"  当发送消息时触发的回调函数
// :messageList="messageList"  当前显示的消息列表数组
// :newMessagesCount="newMessagesCount" 新消息计数（用于显示未读消息数）
// :isOpen="isChatOpen"  布尔值，控制聊天窗口是否打开
// :close="closeChat" 关闭聊天窗口的回调函数
// :minimize="handleMinimize" 最小化聊天窗口的回调函数
// :icons="icons"  自定义图标的配置对象
// :open="openChat"  打开聊天窗口的回调函数
// :showEmoji="true"  是否显示表情选择按钮（布尔值）
// :showFile="true"  是否显示文件上传按钮（布尔值）
// :showEdition="true"  是否允许编辑消息（布尔值）
// :showDeletion="true"  是否允许删除消息（布尔值）
// :deletionConfirmation="true"  删除消息时是否需要确认（布尔值）
// :showTypingIndicator="showTypingIndicator"  是否显示"对方正在输入"的指示器
// :showLauncher="true"  是否显示聊天启动器/触发器（布尔值）
// :showCloseButton="true"  是否显示关闭按钮（布尔值）
// :colors="colors"  自定义颜色的配置对象
// :alwaysScrollToBottom="alwaysScrollToBottom"  是否总是滚动到底部（布尔值）
// :disableUserListToggle="false"  是否禁用用户列表切换（布尔值）
// :messageStyling="messageStyling"  消息样式配置
// :messageMargin="messageMargin"  消息边距设置
// :showMinimizeButton="true"  是否显示最小化按钮（布尔值）
// @onType="handleOnType"  当用户输入时触发的事件（对应handleOnType方法）
// @edit="editMessage"  当编辑消息时触发的事件（对应editMessage方法）
</script>
<template>
  <div>
    <beautiful-chat
        :participants="participants"
        :titleImageUrl="titleImageUrl"
        :onMessageWasSent="onMessageWasSent"
        :messageList="messageList"
        :newMessagesCount="newMessagesCount"
        :isOpen="isChatOpen"
        :close="closeChat"
        :minimize="handleMinimize"
        :icons="icons"
        :open="openChat"
        :showEmoji="true"
        :showFile="true"
        :showEdition="true"
        :showDeletion="true"
        :deletionConfirmation="true"
        :showTypingIndicator="showTypingIndicator"
        :showLauncher="true"
        :showCloseButton="true"
        :colors="colors"
        :alwaysScrollToBottom="alwaysScrollToBottom"
        :disableUserListToggle="false"
        :messageStyling="messageStyling"
        :messageMargin="messageMargin"
        :showMinimizeButton="true"
        @onType="handleOnType"
        @edit="editMessage">
      <template v-slot:header>
        🤔 good good up
      </template>

      <template v-slot:user-avatar="{ message, user }">
        <div style="border-radius:50%; color: pink; font-size: 15px; line-height:25px; text-align:center;background: tomato; width: 25px !important; height: 25px !important; min-width: 30px;min-height: 30px;margin: 5px; font-weight:bold" v-if="message.type === 'text' && user && user.name">
          {{user.name.toUpperCase()[0]}}
        </div>
      </template>

<!--      <template v-slot:text-message-body="{ message }">-->
<!--        <small style="background:red" v-if="message.meta">-->
<!--          {{message.meta}}-->
<!--        </small>-->
<!--        {{message.text}}-->
<!--      </template>-->
<!--      <template v-slot:system-message-body="{ message }">-->
<!--        [System]: {{message.text}}-->
<!--      </template>-->



    </beautiful-chat>
  </div>
</template>

<style scoped>

</style>
